<!--
 * @页面名称:数据库管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card dataBaseManage">
    <el-button type="primary" @click="createBackup">创建备份</el-button>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
      <el-tab-pane label="已备记录" name="0">
        <stable
          :columns="tableSetting.columns"
          :data="tableSetting.data"
          :tablePage="tablePage"
          :pageSizes="[10, 20, 50, 100, { label: '全部数据', value: -1 }]"
          @pageChange="pageChange"
        ></stable>
      </el-tab-pane>
      <el-tab-pane label="还原记录" name="1">
        <stable
          :columns="tableSetting.columns2"
          :data="tableSetting.data2"
          :tablePage="tablePage"
          :pageSizes="[10, 20, 50, 100, { label: '全部数据', value: -1 }]"
          @pageChange="pageChange"
        ></stable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// tab栏绑定字段
const activeName = ref("0");
// 表格设置
const tableSetting = reactive({
  columns: [
    { title: "备份名称", field: "BackupName", sortable: true },
    { title: "备份机", field: "MachineName", sortable: true },
    { title: "备份机IP", field: "IP_Address", sortable: true },
    {
      width: 80,
      title: "操作",
      slots: {
        default: ({ row }: any) => {
          return [
            <el-link type="primary" underline={false} onClick={() => restore(row)}>
              还原
            </el-link>
          ];
        }
      }
    }
  ],
  columns2: [
    { title: "备份时间", field: "BackupTime", sortable: true },
    { title: "备份名称", field: "BackupName", sortable: true },
    { title: "备份机", field: "MachineName", sortable: true },
    { title: "备份机IP", field: "IP_Address", sortable: true }
  ],
  data: [],
  data2: []
});
// 分页配置
const tablePage = reactive({
  showPage: true,
  pageIndex: 1,
  pageSize: 20,
  total: 0
});
// tab栏切换事件
const handleChange = () => {
  tablePage.pageIndex = 1;
  backupList();
};
// 备份表格分页切换事件
const pageChange = ({ pageIndex, pageSize }: any) => {
  tablePage.pageIndex = pageIndex;
  tablePage.pageSize = pageSize;
  backupList();
};
// 获取列表
const backupList = () => {
  if (activeName.value === "0") {
    // 刷新列表
    proxy.$vueAxios.get("MasterBaseBackupLog/RefreshBackupLog", { clientUser: proxy.signalr.connectionId }).then(() => {
      proxy.$vueAxios
        .get("MasterBaseBackupLog/Get", { backupType: 1, pageIndex: tablePage.pageIndex, pageSize: tablePage.pageSize })
        .then((res: any) => {
          tableSetting.data = res.List;
          tablePage.total = res.Count;
        });
    });
  }
  if (activeName.value === "1") {
    proxy.$vueAxios.get("MasterBaseBackupLog/RefreshRestoreLog", { clientUser: proxy.signalr.connectionId }).then(() => {
      proxy.$vueAxios
        .get("MasterBaseBackupLog/Get", { backupType: 3, pageIndex: tablePage.pageIndex, pageSize: tablePage.pageSize })
        .then((res: any) => {
          tableSetting.data2 = res.List;
          tablePage.total = res.Count;
        });
    });
  }
};
// 还原
const restore = (row: any) => {
  proxy.$vueAxios
    .get("MasterBaseBackupLog/ExecuteDBRestore", { dbId: row.ID, clientUser: proxy.signalr.connectionId })
    .then((res: any) => {
      if (res.Mark) {
        backupList();
      }
    });
};
// 创建备份
const createBackup = () => {
  proxy.$vueAxios.get("MasterBaseBackupLog/ExecuteDBBackup", { clientUser: proxy.signalr.connectionId }).then((res: any) => {
    if (res.Mark) {
      backupList();
    }
  });
};

onMounted(() => {
  backupList();
});
</script>

<style scoped lang="scss">
.dataBaseManage {
  height: 100%;
  .el-tabs {
    height: calc(100% - 32px);
    :deep(.el-tabs__content) {
      height: calc(100% - 40px);
      .el-tab-pane {
        height: 100%;
      }
    }
  }
  .el-button {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 2;
  }
}
</style>
